<template>
  <el-container>
    <el-header style="background-color: white;color: black;">
      <h1 align="center">商品列表</h1>
    </el-header>
    <el-main>
      <!-- 查询条件表单-->
      <el-form :inline="true" :model="queryPage" class="demo-form-inline">
        <el-form-item label="名称">
          <el-input v-model="queryPage.goodsName" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="queryPage.goodsType" placeholder="类型" >
              <el-option label="--请选择商品类型--" value=""></el-option>
              <template v-for="x in goodsTypes">
              <el-option :label="x" :value="x"></el-option>
            </template>

          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadData()">查询</el-button>
        </el-form-item>
      </el-form>

      <!-- 表格组件-->
      <!-- :data: 当前页集合-->
      <el-table :data="goodsList" style="100%">
        <!-- 列组件-->

        <el-table-column prop="goodsId" label="编号" width="200" v-if="false"></el-table-column>
        <el-table-column prop="goodsName" label="商品" width="400"></el-table-column>
        <el-table-column prop="goodsType" label="类型" width="200"></el-table-column>
        <el-table-column prop="goodsPrice" label="价格" width="200"></el-table-column>
        <el-table-column prop="goodsNums" label="余量" width="200"></el-table-column>

        <el-table-column label="商品购买" width="200">
          <!-- slot-scope 插槽 用来获取循环的迭代变量-->
          <template slot-scope="scope">
            <el-button size="medium" @click="buy(scope.row, scope.$index)" round>购买</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件-->
      <el-pagination @size-change="select" @current-change="selectPage" :current-page="queryPage.page"
        :page-sizes="[6,8,10,12,14,16]" :page-size="queryPage.row" :total="total"
        layout="sizes,prev,pager,next,jumper,total">
      </el-pagination>

      <!-- 对话框组件-->
      <el-dialog :title="title" :visible.sync="isShow" width="50%">
        <el-form label-width="80px">
          <el-descriptions  direction="horizontal" :column="4" border>
            <el-descriptions-item label="商品类型" :span="10">{{goodsData.goodsType}}</el-descriptions-item>
            <el-descriptions-item label="商品名称" :span="10">{{goodsData.goodsName}}</el-descriptions-item>
            <el-descriptions-item label="商品单价" :span="10">{{goodsData.goodsPrice}}元</el-descriptions-item>
            <el-descriptions-item label="剩余数量" :span="10">{{goodsData.goodsNums}}</el-descriptions-item>
          </el-descriptions>
          <br/><br/><br/>
          <template>
            <el-input-number v-model="goodsData.goodsTotal" placeholder="购买数量" @change="handleChange" size="mini" :min="1" :max="goodsData.goodsNums" label="购买数量"></el-input-number>
          </template>
          <el-form-item align="right">
              <el-button type="primary" @click="onSubmit" v-if="goodsData.goodsNums > 0">购买</el-button>
              <el-button type="primary" plain disabled v-else>已售完~</el-button>
              <el-button @click="close">取消</el-button>
          </el-form-item>
          <div>
            <el-divider content-position="center" v-if="!isNaN(sumPrice)">总计：{{sumPrice}}元</el-divider>
          </div>
        </el-form>
      </el-dialog>
    </el-main>
  </el-container>

</template>

<script>
  export default {
    name: "goodsList",
    data() {
      return {
        goodsList: [],
        goodsTypes:[],
        //总页数
        totalPage: 0,
        //总条数
        total: 0,
        //对话框title
        title: "商品购买",
        isShow: false, //对话框显示
        queryPage: {
          page: 1,
          row: 6,
          goodsName: "",
          goodsType: ""
        },

        goodsData: { //购买表单
          goodsName: "",
          goodsType: "",
          goodsPrice: 0,
          //剩余数量
          goodsNums: 0,
          //购买数量
          goodsTotal: 1,
          goodsTotalPrice: 0
        },
        //购买的时候发送给后端的数据
        sale:{
          //商品名称
          saleGoodsName: "",
          //商品数量
          saleGoodsNums: 0,
          //商品单价
          saleGoodsPrice: 0,
          //商品总价
          saleGoodsPriceCount: 0,
          //当前用户名
          userName: "",
        }
      }
    },
    methods: {
      loadData() {
        var self = this;
        var http = this.$http.get("/user/list", {
          params: this.queryPage
        });
        http.then(function(rs) {
          if (rs.data.success) {
            self.goodsList = rs.data.data.goodsList;
            self.totalPage = rs.data.data.totalPage;
            self.total = rs.data.data.total;
            self.goodsTypes=rs.data.data.goodsTypes;
          } else {
            self.goodsList = [];
            self.total = 0;
          }
        });
      },
      select(row) {
        this.queryPage.row = row;
        this.loadData();
      },
      selectPage(page) {
        this.queryPage.page = page;
        this.loadData();
      },
      //购买按钮弹出对话框
      buy(x, index) {
        this.isShow = true;
        this.goodsData = x;
      },
      handleChange() {
        this.goodsData.goodsTotPrice = this.sumPrice;
      },
      //购买
      onSubmit() {
        this.sale.saleGoodsName = this.goodsData.goodsName;
        this.sale.saleGoodsNums = this.goodsData.goodsTotal;
        this.sale.saleGoodsPrice = this.goodsData.goodsPrice;
        this.sale.saleGoodsPriceCount = this.goodsData.goodsTotalPrice;
        this.sale.userName = sessionStorage.getItem("name");

        var self = this;
        console.log(this.sale);
        var http = this.$http.get("/sale/buy", {
          params: this.sale
        });
        http.then(function(rs){
          if(rs.data.success){
            self.$message(rs.data.info);
            self.isShow = false;
            //页面刷新
            location.reload();
          }
        });

      },
      //取消
      close() {
        this.isShow = false;
      }
    },
    mounted() {
      this.loadData();
    },
    computed:{
      //商品总价
      sumPrice() {
        this.goodsData.goodsTotalPrice = this.goodsData.goodsPrice * this.goodsData.goodsTotal;
        return this.goodsData.goodsTotalPrice;
      }
    }
  }
</script>

<style>

</style>
